Day 12 fetch函式建立連線

2024 iThome 鐵人賽

DAY 12

JavaScript

每天都進步一點！從零開始的JavaScript 與基礎網路知識學習系列第 12 篇

16th鐵人賽

karin0720

2024-09-12 09:09:51

69 瀏覽

分享至

練習內容來自：彭彭的課程
https://www.youtube.com/watch?v=6X8sDGFGRss&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=26

今日學習內容

AJAX/XHR技術：利用javascript程式，用來將網頁前端與後端做連接。
fetch函式：近期javascript提供的新連接方式，使用上更簡單靈活。
以下會使用fetch函式，來練習執行網路連線，並取得資料。

fetch函式

對於想要取得資料的格式不同，有不同的寫法。

純文字格式

fetch(網址).then(function(response){
return response.text();
});.then(functiondata){
console.log(data);
});

JSON格式

JSON格式保有原本的物件陣列結構。

fetch(網址).then(function(response){
return response.json();
});.then(function(data){
console.log(data); 
});

練習

目標：利用fetch函式與網址建立連線，並取得資料後，顯示在頁面上。

<html>
<head> 
    <title>AJAX網路連線實務練習</title>
</head>
<body>
    <button onclick="gatData();">連線取得資料</button>
    <div id="result"></div>
    <script>
        function getData(){
            fetch("https://cwpeng.github.io/live-records-samples/data/products.json").then(function(response){
                return response.json();
            }).then(function(data){
                let result=document.querySelector("#result");
                result.innerHTML="";
                for(let i=0;i<data.length;i++){
                    let product=data[i];
                    result.innerHTML+="<div>"+product.name+","+product.price+","+product.description+"</div>";
                }
            });
        }
    </script>
</body>
</html>

顯示取得資料的方法：寫一個div，建立id連接後，再用for loop將陣列內的資料一筆一筆依序印出。